<template>
  <div class="crash-report2">
    <el-form :inline="true">
      <el-form-item label="时间">
        <el-date-picker class="date-picker"
          size="small"
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format='yyyy-MM-dd HH:mm:ss'
          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" :loading="false" @click="getPageData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="8" >
        <div id="bar-report" style="width: 100%; height:500px;" v-loading="barLoading"></div>
      </el-col>
      <el-col :span="16" >
        <div id="map-report" style="width: 100%; height:500px;" v-loading="mapLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import 'echarts/map/js/china.js'
  import moment from 'moment'

  var resultData = [
    { name: '北京', value: 775.05 },
    { name: '天津', value: 912.53 },
    { name: '上海', value: 472.95 },
    { name: '重庆', value: 778.03 },
    { name: '河北', value: 664.04 },
    { name: '河南', value: 823.26 },
    { name: '云南', value: 792.59 },
    { name: '辽宁', value: 638.05 },
    { name: '黑龙江', value: 608.84 },
    { name: '湖南', value: 852.34 },
    { name: '安徽', value: 853.50 },
    { name: '山东', value: 581.81 },
    { name: '新疆', value: 779.43 },
    { name: '江苏', value: 688.48 },
    { name: '浙江', value: 654.79 },
    { name: '江西', value: 773.54 },
    { name: '湖北', value: 730.35 },
    { name: '广西', value: 967.54 },
    { name: '甘肃', value: 837.49 },
    { name: '山西', value: 656.91 },
    { name: '内蒙古', value: 672.08 },
    { name: '陕西', value: 846.11 },
    { name: '吉林', value: 714.03 },
    { name: '福建', value: 802.27 },
    { name: '贵州', value: 1039.53 },
    { name: '广东', value: 936.00 },
    { name: '青海', value: 694.85 },
    { name: '西藏', value: 971.13 },
    { name: '四川', value: 487.01 },
    { name: '宁夏', value: 814.52 },
    { name: '海南', value: 859.42 }
  ]

  export default {
    data () {
      return {
        dateRange: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')],
        barLoading: false,
        mapLoading: false,
        chartsInstance: {
          bar: '',
          map: ''
        },
        yData: [],
        resultData: resultData
      }
    },
    activated () {
      this.getPageData()
    },
    methods: {
      getPageData () {
        var vm = this
        var params = []
        var url = '/rptime/list'

        vm.barLoading = true
        vm.mapLoading = true

        if (vm.dateRange !== null && vm.dateRange !== '') {
          var startTime = vm.dateRange[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD HH:mm:ss'))

          var endTime = vm.dateRange[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD HH:mm:ss'))
        }

        url += (params.length > 0 ? '?' + params.join('&') : '')
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.resultData = data.data.reverse().map(item => {
              return {name: item.province, value: (item.avgTime).toFixed(2)}
            })
            vm.yData = data.data.map(item => {
              return item.province
            })
            vm.initEcharts()
          }
        })
      },
      initEcharts () {
        var vm = this
        vm.chartsInstance.bar = echarts.init(document.getElementById('bar-report'))
        vm.chartsInstance.map = echarts.init(document.getElementById('map-report'))
        vm.getMapReport()
        vm.getBarReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.map.resize()
        })
      },
      getMapReport () {
        var vm = this
        /* var yData = []
        vm.resultData.sort(function (o1, o2) { // 升序o1-o2 降序o2-o1
          if (isNaN(o1.value) || o1.value == null) return -1
          if (isNaN(o2.value) || o2.value == null) return 1
          return o1.value - o2.value
        })

        for (let i = 0; i < vm.resultData.length; i++) {
          yData.push(vm.resultData[i].name)
        } */
        let isShow = vm.resultData.length === 0
        var option = {
          title: {
            show: isShow,
            text: '暂无数据',
            top: '22%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          },
          tooltip: {
            formatter: function (params) {
              if (params.name !== '') {
                return params.name + '：' + params.data['value'] + 'ms'
              }
            }
          },
          visualMap: {
            type: 'piecewise',
            pieces: [
              {min: 1000, label: '>1000ms'},
              {min: 900, max: 1000},
              {min: 800, max: 900},
              {min: 700, max: 800},
              {max: 700, label: '<700ms'}
            ],
            /* type: 'continuous',
            min: 0,
            max: 1000, */
            calculable: true,
            inRange: {
              // color: ['#496741', '#7FA25E', '#CABF6F', '#BB7D4E', '#83403A']
              color: ['#00A65A', '#A2CE53', '#D9E948', '#FDC432', '#D94942']
              // color: ['#E4E4E4', '#BBD9E9', '#AED1E5', '#92C1DC', '#4E98C4']
            },
            bottom: 30,
            left: '10%',
            formatter: function (value, value2) {
              return value + ' ~ ' + value2 + 'ms'
              // return value + 'ms'
            }
          },
          geo: {
            roam: true,
            map: 'china',
            left: '18%',
            // right: '2%',
            layoutSize: '80%',
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              emphasis: {
                areaColor: '#fff464'
              }
            },
            regions: [{
              name: '南海诸岛',
              value: 0,
              itemStyle: {
                normal: {
                  opacity: 1,
                  label: {
                    show: true
                  }
                }
              }
            }]
          },
          series: [{
            name: 'mapSer',
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
              show: true
            },
            data: vm.resultData
          }]
        }
        vm.chartsInstance.map.setOption(option)
        vm.mapLoading = false
      },
      getBarReport () {
        var vm = this
        let isShow = vm.resultData.length === 0
        var barOption = {
          title: [{
            text: '应用响应时间地区分布',
            x: 'left'
          }, {
            show: isShow,
            text: '暂无数据',
            top: '40%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          grid: {
            left: '17%',
            top: '13%',
            right: '15%',
            bottom: 10
          },
          xAxis: {
            type: 'value',
            scale: true,
            position: 'top',
            splitNumber: 1,
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              margin: 2,
              textStyle: {
                color: '#aaa'
              }
            }
          },
          yAxis: {
            type: 'category',
            name: '单位（ms）',
            nameTextStyle: {
              color: '#666',
              fontSize: 13
            },
            nameGap: 5,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#ddd'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#333'
              }
            },
            data: vm.yData
          },
          series: [{
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 20,
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value >= 1000) {
                    // return '#83403A'
                    return '#D94942'
                  } else if (params.value >= 900 && params.value < 1000) {
                    // return '#BB7D4E'
                    return '#FDC432'
                  } else if (params.value >= 800 && params.value < 900) {
                    // return '#CABF6F'
                    return '#D9E948'
                  } else if (params.value >= 700 && params.value < 800) {
                    // return '#7FA25E'
                    return '#A2CE53'
                  } else if (params.value >= 0 && params.value < 700) {
                    // return '#496741'
                    return '#00A65A'
                  }
                }
              }
            },
            data: vm.resultData
          }]
        }
        vm.chartsInstance.bar.setOption(barOption)
        vm.barLoading = false
      }
    }
  }
</script>
<style scoped>
.el-form{
  text-align: right;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.el-button{
  padding: 8px 15px;
  font-size: 14px;
}
</style>

